// 立即执行函数 监控区域
(function () {
  $(".monitor .tabs a").on("click", function () {
    $(this).addClass("active").siblings().removeClass("active");
    $(".content").eq($(this).index()).show().siblings(".content").hide();
  });

  // 先将marquee里面的子元素进行克隆
  $(".marquee-view .marquee").each(function (i, item) {
    // 将$(item)它的孩子克隆一份
    var rows = $(item).children().clone();
    $(item).append(rows);
  });
})();

// 点位分布统计
(function () {
  // 1. 要通过echarts.init()这个方法
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".pie"));
  // 指定图表的配置项和数据
  var option = {
    color: ["#006cff", "#60cda0", "#ed8884", "#ff9f7f", "#0096ff", "#9fe6b8", "#32c5e9", "#1d9dff"],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    series: [
      {
        name: "面积模式",
        type: "pie",
        radius: ["10%", "70%"],
        center: ["50%", "50%"],
        roseType: "radius",
        data: [
          { value: 20, name: "云南" },
          { value: 26, name: "北京" },
          { value: 24, name: "山东" },
          { value: 25, name: "河北" },
          { value: 20, name: "江苏" },
          { value: 25, name: "浙江" },
          { value: 30, name: "四川" },
          { value: 42, name: "湖北" }
        ],
        label: {
          fontSize: 10
        },
        labelLine: {
          // 视觉引导线第一段的长度
          length: 6,
          // 视觉引导线第二段的长度
          length2: 8
        }
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();

// 用户统计
(function () {
  // 1. 要通过echarts.init()这个方法
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".bar"));
  // 指定图表的配置项和数据
  var option = {
    color: new echarts.graphic.LinearGradient(
      // (x1,y2) 点到点 (x2,y2) 之间进行渐变
      0,
      0,
      0,
      1,
      [
        { offset: 0, color: "#00fffb" }, // 0 起始颜色
        { offset: 1, color: "#0061ce" } // 1 结束颜色
      ]
    ),
    // 提示框组件
    tooltip: {
      trigger: "item"
    },
    grid: {
      left: "0%",
      right: "4%",
      bottom: "3%",
      top: "3%",
      containLabel: true,
      show: true,
      //grid 四条边框的颜色
      borderColor: "rgba(0, 240, 255, 0.3)"
    },
    xAxis: [
      {
        type: "category",
        data: ["上海", "广州", "北京", "深圳", "合肥", "", "......", "", "杭州", "厦门", "济南", "成都", "重庆"],
        axisTick: {
          alignWithLabel: false,
          // 不显示刻度
          show: false
        },
        // x坐标轴文字标签样式设置
        axisLabel: {
          color: "#4c9bfd"
        },
        // x坐标轴颜色设置
        axisLine: {
          lineStyle: {
            color: "rgba(0, 240, 255, 0.3)"
            // width:8,  x轴线的粗细
            // opcity: 0,   如果不想显示x轴线 则改为 0
          }
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        // 刻度设置
        axisTick: {
          // 不显示刻度
          show: false
        },
        // y坐标轴文字标签样式设置
        axisLabel: {
          color: "#4c9bfd"
        },
        // y坐标轴颜色设置
        axisLine: {
          lineStyle: {
            color: "rgba(0, 240, 255, 0.3)"
            // width:8,  x轴线的粗细
            // opcity: 0,   如果不想显示x轴线 则改为 0
          }
        },
        // y轴 分割线的样式
        splitLine: {
          lineStyle: {
            color: "rgba(0, 240, 255, 0.3)"
          }
        }
      }
    ],
    series: [
      {
        name: "直接访问",
        type: "bar",
        barWidth: "60%",
        data: [
          2100,
          1900,
          1700,
          1560,
          {
            value: 1400,
            itemStyle: {
              color: "#f00"
            }
          },
          {
            value: 1200,
            itemStyle: {
              color: "#254065"
            },
            emphasis: {
              itemStyle: {
                color: "#254065"
              }
            },
            tooltip: {
              extraCssText: "opacity:0"
            }
          },
          {
            value: 1200,
            itemStyle: {
              color: "#254065"
            },
            emphasis: {
              itemStyle: {
                color: "#254065"
              }
            },
            tooltip: {
              extraCssText: "opacity:0"
            }
          },
          {
            value: 1200,
            itemStyle: {
              color: "#254065"
            },
            emphasis: {
              itemStyle: {
                color: "#254065"
              }
            },
            tooltip: {
              extraCssText: "opacity:0"
            }
          },
          900,
          750,
          600,
          480,
          240
        ]
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();

// 销售统计
(function () {
  // 数据就是用于tab切换的
  var data = {
    year: [
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
    ],
    quarter: [
      [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
      [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
    ],
    month: [
      [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
      [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
    ],
    week: [
      [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
      [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
    ]
  };
  // console.log(data['year'][0]);
  // 1. 要通过echarts.init()这个方法
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".line"));
  // 指定图表的配置项和数据
  var option = {
    color: ["#00f2f1", "#ed3f35"],
    tooltip: {
      trigger: "axis"
    },
    legend: {
      right: "10%",
      textStyle: {
        color: " #4c9bfd"
      },
      data: ["预期销售额", "实际销售额"]
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true,
      containLabel: true
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
        show: false
      }
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false // 去除刻度
      },
      axisLabel: {
        color: "#4c9bfd" // 文字颜色
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a" // 分割线颜色
        }
      }
    },
    series: [
      {
        name: "预期销售额",
        type: "line",
        stack: "总量",
        data: data["year"][0],
        smooth: true
      },
      {
        name: "实际销售额",
        type: "line",
        stack: "总量",
        data: data["year"][1],
        smooth: true
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });

  // 先给a注册点击事件
  $(".sales .caption a").on("click", function () {
    // 获取当前的索引号
    index = $(this).index() - 1;
    $(this).addClass("active").siblings("a").removeClass("active");
    // 获取标签身上的自定义属性的值 attr 获取自定义属性的值
    var type = $(this).attr("data-index");
    // 然后根据这个属性的值 去data对象中去找对应的数据
    // console.log(data[type][0]);
    option.series[0].data = data[type][0];
    option.series[1].data = data[type][1];
    // 重新渲染数据
    myChart.setOption(option);
  });

  var index = 0;
  var timer = setInterval(function () {
    $(".sales .caption a").eq(index).click();
    index++;
    // 如果index的值 已经是大于3了
    if (index >= 4) index = 0;
  }, 1000);

  $(".line").hover(
    function () {
      // 鼠标经过
      clearInterval(timer);
    },
    function () {
      // 先清除一下定时器
      clearInterval(timer);
      // 鼠标离开
      timer = setInterval(function () {
        $(".sales .caption a").eq(index).click();
        index++;
        // 如果index的值 已经是大于3了
        if (index >= 4) index = 0;
      }, 1000);
    }
  );
})();
// // 点位分布统计
// (function () {
//   // 1. 要通过echarts.init()这个方法
//   // 基于准备好的dom，初始化echarts实例
//   var myChart = echarts.init(document.querySelector(".radar"));
//   // Schema:
//   // date,AQIindex,PM2.5,PM10,CO,NO2,SO2
//   var dataBJ = [[90, 19, 56, 11, 34]];

//   var lineStyle = {
//     normal: {
//       color: "#fff"
//     }
//   };

//   var option = {
//     tooltip: {
//       show: true,
//       position: ["40%", "10%"]
//     },
//     radar: {
//       indicator: [
//         { name: "机场", max: 100 },
//         { name: "商场", max: 100 },
//         { name: "火车站", max: 100 },
//         { name: "汽车站", max: 100 },
//         { name: "地铁", max: 100 }
//       ],
//       center: ["50%", "50%"],
//       shape: "circle",
//       radius: "65%",
//       splitNumber: 4,
//       name: {
//         textStyle: {
//           color: "#4c9bfd",
//           fontSize: 9
//         }
//       },
//       splitLine: {
//         lineStyle: {
//           color: "rgba(255, 255, 255, 0.5)"
//         }
//       },
//       splitArea: {
//         show: false
//       },
//       axisLine: {
//         lineStyle: {
//           color: "rgba(255, 255, 255, 0.5)"
//         }
//       }
//     },
//     series: [
//       {
//         name: "北京",
//         type: "radar",
//         lineStyle: lineStyle,
//         data: dataBJ,
//         symbol: "circle",
//         symbolSize: 5,
//         itemStyle: {
//           color: "#fff"
//         },
//         areaStyle: {
//           // opacity: 0.1
//           color: "rgba(238, 197, 102, 0.6)"
//         },
//         label: {
//           show: true,
//           color: "#fff",
//           fontSize: 10
//         }
//       }
//     ]
//   };
//   // 使用刚指定的配置项和数据显示图表。
//   myChart.setOption(option);
//   // 4. 当我们浏览器缩放的时候，图表也等比例缩放
//   window.addEventListener("resize", function () {
//     // 让我们的图表调用 resize这个方法
//     myChart.resize();
//   });
// })();
// 销售渠道模块 雷达图
(function () {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".radar"));
  // 2.指定配置

  var option = {
    tooltip: {
      show: true,
      // 控制提示框组件的显示位置
      position: ["60%", "10%"]
    },
    radar: {
      indicator: [
        { name: "机场", max: 100 },
        { name: "商场", max: 100 },
        { name: "火车站", max: 100 },
        { name: "汽车站", max: 100 },
        { name: "地铁", max: 100 }
      ],
      // 修改雷达图的大小
      radius: "60%",
      shape: "circle",
      // 分割的圆圈个数
      splitNumber: 4,
      name: {
        // 修饰雷达图文字的颜色
        textStyle: {
          color: "#4c9bfd"
        }
      },
      // 分割的圆圈线条的样式
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255, 0.5)"
        }
      },
      splitArea: {
        show: false
      },
      // 坐标轴的线修改为白色半透明
      axisLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0.5)"
        }
      }
    },
    series: [
      {
        name: "北京",
        type: "radar",
        // 填充区域的线条颜色
        lineStyle: {
          normal: {
            color: "#fff",
            width: 1,
            opacity: 0.5
          }
        },
        data: [[90, 19, 56, 11, 34]],
        // 设置图形标记 （拐点）
        symbol: "circle",
        // 这个是设置小圆点大小
        symbolSize: 5,
        // 设置小圆点颜色
        itemStyle: {
          color: "#fff"
        },
        // 让小圆点显示数据
        label: {
          show: true,
          fontSize: 7
        },
        // 修饰我们区域填充的背景颜色
        areaStyle: {
          color: "rgba(238, 197, 102, 0.6)"
        }
      }
    ]
  };
  // 3.把配置和数据给对象
  myChart.setOption(option);
  // 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();

// 销售渠道模块 雷达图
(function () {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".gauge"));
  // 2.指定配置

  var option = {
    series: [
      {
        name: "访问来源",
        type: "pie",
        radius: ["130%", "150%"],
        // 移动下位置  套住50%文字
        center: ["48%", "80%"],
        labelLine: {
          show: false
        },
        // 鼠标经过不变大
        hoverOffset: 0,
        data: [
          {
            value: 50,
            itemStyle: { color: "#12274d" }
          },
          { value: 100, itemStyle: { color: "transparent" } },
          {
            value: 50,
            itemStyle: {
              // 颜色渐变#00c9e0->#005fc1
              color: new echarts.graphic.LinearGradient(
                // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "#00c9e0" }, // 0 起始颜色
                  { offset: 1, color: "#005fc1" } // 1 结束颜色
                ]
              )
            }
          }
        ]
      }
    ]
  };

  // 3.把配置和数据给对象
  myChart.setOption(option);
  // 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();

